<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>limited - Drag</title>
    <script src="Drag.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #div1{
             width: 300px;
             height: 100px;
             background: #9da;
             position: absolute;
         }
        #div2{
            width: 300px;
            height: 100px;
            background: #e4393c;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="div1">父级拖拽</div>
<div id="div2">限制范围的子级拖拽</div>
<script>
window.onload = function () {
    new Drag('div1');
    new LimitDrag('div2');
}

function LimitDrag(id) {
//继承
    Drag.call(this,id);     //继承属性
}

//继承方法
for (var i in Drag.prototype){
    LimitDrag.prototype[i] = Drag.prototype[i];
}
//在父级Drag的move方法之上 建造属于自己的代码
//来自于Drag的fnMove被覆盖
LimitDrag.prototype.fnMove = function(e) {
    var oEvent = e||event;
    //存位置
    var l = oEvent.clientX - this.disX;
    var t = oEvent.clientY - this.disY;

    if(l<0){
        l=0;
    }else if(l>document.documentElement.clientWidth - this.oDiv.offsetWidth){
        l=document.documentElement.clientWidth - this.oDiv.offsetWidth;
    }
    if(t<0){
        t=0;
    }else if(t>document.documentElement.clientHeight - this.oDiv.offsetHeight){
        t=document.documentElement.clientHeight - this.oDiv.offsetHeight;
    }

    this.oDiv.style.left = l+'px';
    this.oDiv.style.top = t+'px';
}
</script>
</body>
</html>